<template>
  <div>
    <div v-if="config === 'main'"
         style="background:#fff; display: flex; flex-wrap:wrap; margin: 10px; padding: 60px 60px 0 60px;border-radius: 10px; text-align: center">
      <div v-for="(item,index) in dataform" :key="index"
           style="margin: 0 25px 60px 25px;display: flex;flex-direction:column;cursor:pointer" @click="onClick(index)"
           v-if="hasPermission(item.roles)">
        <el-image :src="item.url" style="width: 100px; height: 100px; margin-bottom: 12px;">
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
        <span class="demonstration">{{ item.text }}</span>
      </div>
      <el-dialog append-to-body :visible.sync="dialogVisible">
        <thirdparty-config></thirdparty-config>
      </el-dialog>
      <el-dialog destroy-on-close append-to-body :visible.sync="Materialwatermark">
        <Materialwatermark></Materialwatermark>
      </el-dialog>
      <el-dialog destroy-on-close append-to-body :visible.sync="tenantSwitchVisible">
        <tenant-switch v-if="tenantSwitchVisible" :close="closeTenantSwitch"></tenant-switch>
      </el-dialog>
      <el-dialog destroy-on-close
                 append-to-body
                 :visible.sync="youtubeVisible"
                 @close="closeYouTube"
                 title="油管配置" top="26vh">
        <youtube :youtube-code="youtubeCode" v-if="youtubeVisible"></youtube>
      </el-dialog>
      <!--      <el-dialog-->
      <!--        title="通知配置"-->
      <!--        :visible.sync="noticeConf"-->
      <!--        width="80%"-->
      <!--        :before-close="handleClick"-->
      <!--        :append-to-body="true">-->
      <!--        <notice-config ref="child"></notice-config>-->
      <!--      </el-dialog>-->
    </div>

    <div v-if="config === 'notice'">
      <notice-config v-if="noticeConf" ref="child" @close="closeNotice"></notice-config>
    </div>
    <!-- 标签页展示 -->
    <div v-if="config === 'tags'">
      <creative-tags-config :offerId="offerId"></creative-tags-config>
    </div>
    <div v-if="config==='newtag'">
      <creative-tags-config v-if="roles.administrator" :offerId="offerId"></creative-tags-config>
      <add-creative-tags :active="active" v-else></add-creative-tags>
    </div>
    <!--商务中心配置-->
    <businessCenterConfiguration @close="goback()" v-if="config==='businessConfig'" />
    <!--定时数据配置-->
<!--    <div v-if="config === 'timing'">-->
<!--    <timing-report-config @close="goback()"></timing-report-config>-->
<!--  </div>-->
  </div>

</template>

<script>
import ThirdpartyConfig from "@/views/system/thirdpartyConfig";
import Materialwatermark from "@/views/system/Materialwatermark";
import TenantSwitch from "@/views/system/components/TenantSwitch";
import NoticeConfig from "@/views/system/components/noticeConfig";
import creativeTagsConfig from "@/views/system/components/creativeTagsConfig";
import addCreativeTags from '@/views/system/components/addCreativeTags'
import businessCenterConfiguration from '@/views/system/components/businessCenterConfiguration'
import {mapGetters} from "vuex";
import youtube from "@/views/system/components/youtube";
export default {
  name: "Navigation",
  components: {
    NoticeConfig,
    Materialwatermark,
    ThirdpartyConfig,
    TenantSwitch,
    creativeTagsConfig,
    youtube,
    addCreativeTags,
    businessCenterConfiguration
  },
  data() {
    return {
      config: 'main',
      noticeConf: false,
      Materialwatermark: false,
      dialogVisible: false,
      tenantSwitchVisible: false,
      youtubeVisible: false,
      youtubeCode: null,
      offerId: '',
      dataform: [{
        roles: ['admin'],
        text: "三方配置",
        url: "/img/icon/partyconfiguration.png"
      }, {
        roles: ['admin'],
        text: "通知配置",
        url: "/img/icon/inform.png"
      }, {
        roles: ['admin'],
        text: "流程节点配置",
        url: "/img/icon/tenant_switch.png"
      }, {
        roles: ['admin'],
        text: "油管账号配置",
        url: "/img/icon/yb.png"
      }, {
        roles: ['admin'],
        text: "素材水印",
        url: "/img/icon/watermark.png"
      },
        //   {
        //   roles: ['administrator','admin','designer_manager'],
        //   text: "素材标签配置",
        //   url: "/img/icon/creative_tag.png"
        // },
        {
          roles: ['administrator', 'admin', 'designer_manager'],
          text: "素材标签配置",
          url: "/img/icon/creative_tag.png"
        },
        {
          roles: ['administrator', 'admin', 'designer_manager'],
          text: "商务中心配置",
          url: "/img/icon/businessCenterConfiguration.png"
          // ${require('../../../public/img/icon/businessCenterConfiguration.png')}
        }
        // {
        //   roles: ['admin','optimizer','agc_customer_manager','agc_sales_manager'],
        //   text: "定时报告配置",
        //   url: "/img/icon/clock.png"
        // }
      ],
      active: 'tag'
    }
  },
  computed: {
    ...mapGetters(["roles","userInfo"]),
  },
  activated() {
    this.$route.meta.isBack = false
    //获取路由跳转过来的数据
    if (this.$route.params.config) {
      this.config = this.$route.params.config
      this.offerId = this.$route.params.offerId
      this.active = this.$route.params.active
      console.log(this.offerId)
    }
  },
  created() {
    if(this.userInfo.tenant_id != '321600'){
      this.dataform.splice(this.dataform.length-1, 1);
      // this.dataform.push({
      //   roles: ['administrator', 'admin', 'designer_manager'],
      //   text: "商务中心配置",
      //   url: "/img/icon/businessCenterConfiguration.png"
      //   // ${require('../../../public/img/icon/businessCenterConfiguration.png')}
      // })
    }
    if (this.$route.query.code) {
      this.youtubeCode = this.$route.query.code
      this.youtubeVisible = true
    }
  },
  methods: {
    handleClick() {
      this.$refs.child.sing();
      this.noticeConf = false
    },
    onClick(val) {
      console.log(val)
      if (val == 0) {
        this.dialogVisible = true
      }
      if (val == 1) {
        this.config = 'notice'
        this.noticeConf = true
      }
      if (val == 2) {
        this.tenantSwitchVisible = true
      }
      if (val == 3) {
        this.youtubeVisible = true
      }
      if (val === 4) {
        this.Materialwatermark = true
      }
      // if (val === 5) {
      //   this.config = 'tags'
      // }
      if (val === 5) {
        this.config = 'newtag'
      }
      if (val === 6) {
        this.config = 'businessConfig'
      }
    },
    hasPermission(roles) {
      if (roles == null || roles.length == 0) {
        return true;
      }
      for (let i = 0; i < roles.length; i++) {
        if (this.roles[roles[i]]) {
          return true;
        }
      }
      return false;
    },
    closeTenantSwitch() {
      this.tenantSwitchVisible = false;
    },
    closeYouTube() {
      this.youtubeVisible = false
      this.youtubeCode = null
    },
    closeNotice() {
      this.noticeConf = false;
      this.config = 'main';
    },
    goback() {
      this.config = 'main'
    }
  }
}
</script>

<style scoped>
.demonstration {
  font-size: 12px;
}
</style>
